<template>
    <div class="flex bottomBox">
        <!-- 轨迹列表 -->
        <div class="boxShadow diagnoseCom">
            <div class="modulContent">
                <div class="flex dignoseItem" v-for="(item,index) in this.$store.state.trajectoryList" :key="index">
                    <div class="iconImg"></div>
                    <div class="name" @click="showTrackDetailBtn(item.name)">{{item.name}}</div>
                    <div class="itemDel" @click="delTrackBtn(item.name)"></div>
                </div>
            </div>
            <div class="flex formBtns">
                <el-button size="small" type="primary" @click="addTrackBtn">添加轨迹</el-button>
            </div>
        </div>
    </div> 
</template>

<script>
import { hideOtherModule, showTrackDetail, deleteTrack } from '../js/methods'
export default {
    name: 'stationsComponent',
    components:{

    },
    data(){
        return{
                    
        }
    },
    methods:{
        //点击显示轨迹详情
        showTrackDetailBtn:function(name){
            showTrackDetail(name);
        },

        //点击删除轨迹
        delTrackBtn:function(name){
            this.$store.commit('setTrackName',name);//缓存站点名称
            deleteTrack(name);
        },

        //添加轨迹
        addTrackBtn:function(){
            const that = this;
            if(window.localStorage.getItem('authorizationPassword')){
                //隐藏轨迹列表
                that.$store.commit('switchTrackList',false);
                //显示添加轨迹
                that.$store.commit('switchAddTrack',true);
            }else{
                this.$message({
                    showClose: true,
                    message: '暂无操作权限，请输入授权密码',
                    type: 'warning'
                });
            }
        }
    },

    //属性监听
    watch:{
       
    }

}
</script>

<style scoped lang="less">
 .diagnoseCom{
     background-color: #ffffff;
     border-top-left-radius: 4px;
     border-top-right-radius: 4px;
     padding: 10px;
     text-align: left;
     font-size: 14px;
     width: 100%;
 }
 .boldTitle{
     font-weight: bold;
 }
 .modulContent{
     max-height: 250px;
     overflow-y: scroll;
 }
 .dignoseItem{
     justify-content: space-between;
     border-bottom: 1px solid #eeeeee;
     .iconImg{
         flex: 1;
         height: 35px;
         background: url('../../src/assets/icon-track-sel.png') no-repeat center;
         background-size: 60%;
     }
     .name{
         flex: 7;
         padding-left: 1em;
         font-size: 16px;
         line-height: 35px;
         height: 35px;
         color: #3f86fe;
     }
     .itemDel{
         flex: 1;
         height: 35px;
         background: url('../../src/assets/icon-del-sel.png') no-repeat center;
         background-size: 50%;
     }
 }
  .formBtns{
     padding: 0 5px;
     margin-top: 15px;
     button{
         width: 100%;
     }
 }
</style>